package com.example.jetpackcomposelayouts

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import coil.compose.AsyncImage
import coil.compose.rememberAsyncImagePainter
import coil.compose.rememberImagePainter
import kotlinx.coroutines.Dispatchers
import kotlinx.coroutines.launch

/**
 * Author：young
 * .
 * Time： 27/9/2023 上午9:06 周三
 * .
 * Desc：
 *
 * 17-使用列表
 * https://www.bilibili.com/video/BV1ob4y1a7ad/?p=17&spm_id_from=pageDriver&vd_source=e07cc8cc94eb22bd76722071b03cd199
 *
 */


@Composable
fun SimpleColor() {
    // Column 默认是无法滚动的
    // 如果需要滚动，需要借助 rememberScrollState ，类似 ScrollView
    // state 的值发生变化，然后就重新调用了 @Composable 函数，进而重绘
    val scrollState = rememberScrollState()
    Column(modifier = Modifier.verticalScroll(scrollState)) {
        repeat(100) {
            Text(text = "item ${it}", style = MaterialTheme.typography.titleMedium)
        }
    }
}

@Composable
fun LazyList() {
    // LazyColumn 相当于RecyclerView
//    LazyColumn(content = {
//        items(100){
//            Text(text = "item ${it}", style = MaterialTheme.typography.titleMedium)
//        }
//    })

    val scrollState = rememberLazyListState()
    LazyColumn(state = scrollState, content = {
        items(100) {
            Text(
                text = "item ${it}", style = MaterialTheme.typography.titleMedium,
                modifier = Modifier
                    .height(40.dp)
                    .fillMaxWidth()
                    .padding(horizontal = 10.dp)
            )
        }
    })
}

@Composable
fun ScrollingList() {
    val listSize = 100
    val scrollState = rememberLazyListState()
    // 创建一个协程
    val coroutineScope = rememberCoroutineScope()
//    LaunchedEffect(key1 = listSize, block = {
//        scrollState.animateScrollToItem(index = listSize-1)
//    })
    Column {
        Row {
            Button(onClick = {
                coroutineScope.launch(Dispatchers.Main) {
                    scrollState.animateScrollToItem(index = 0)
                }

            }, modifier = Modifier.weight(1f)) {
                Text(text = "Scroll to the top")
            }
            Button(onClick = {
                coroutineScope.launch(Dispatchers.Main) {
                    scrollState.animateScrollToItem(index = listSize - 1)
                }
            }) {
                Text(text = "Scroll to the bottom")
            }
        }
        LazyColumn(state = scrollState, content = {
            items(listSize) {
                ImageListItem(index = it)
            }
        })
    }
}

@Composable
fun ImageListItem(index: Int) {
    Row(verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier.fillMaxWidth()) {
//        Image(
//            painter = rememberAsyncImagePainter(
//                model = "http://p3.qhimg.com/t01f13b899396792242.webp",
//            ), // 使用 coil-compose 加载图片
//            contentDescription = null,
//            modifier = Modifier.size(50.dp),
//        )
        AsyncImage(
            model = "http://p3.qhimg.com/t01f13b899396792242.webp", contentDescription = null,
            modifier = Modifier.size(50.dp)
        )
        Spacer(modifier = Modifier.height(10.dp))
        Text(text = "Item #${index}", style = MaterialTheme.typography.titleMedium)
    }
}


